<template>
  <tui-modal :show="show" @click="modalClick">
    <view v-for="item in list" :key="item.value" hover-class="card-hover" :hover-stay-time="70">
      <tui-list-cell :hover="false" padding="22rpx 28rpx" @click="choose(item)">
        <l-check-box :value="item.checked" :label="item.label" size="50rpx" font-size="30rpx" />
      </tui-list-cell>
    </view>
  </tui-modal>
</template>

<script>
import { carModel } from '../../index'
export default {
  name: 'LicenceType',
  props: {
    licence: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      driverLicence: '',
      driverLicenceSave: []
    }
  },
  computed: {
    value() {
      const arr = []
      carModel.forEach(item => {
        if (this.driverLicenceSave.includes(item.value)) arr.push(item.value)
      })
      return arr
    }
  },
  watch: {
    licence(e) {
      this.driverLicence = e
    }
  },
  methods: {
    cancel() {
      this.driverLicenceSave = []
      this.$emit('update:show', false)
      this.$emit('cancel')
    },
    confirm() {
      this.driverLicence = this.value.join(',')
      this.$emit('confirm', this.driverLicence)
      this.cancel()
    },
    choose(e) {
      e.checked = !e.checked
      if (e.checked) {
        this.driverLicenceSave.push(e.value)
      } else {
        const index = this.driverLicenceSave.indexOf(e.value)
        this.driverLicenceSave.splice(index, 1)
      }
    },
    formatChecked() {
      carModel.forEach(item => {
        item.checked = this.driverLicence.includes(item.value)
        if (item.checked) this.driverLicenceSave.push(item.value)
      })
      this.list = this.copyData(carModel)
    },
    modalClick(e) {
      if (e.index) {
        this.confirm()
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style scoped>

</style>
